<template>
  <t-layout-page class="circle-marker">
    <!-- 添加高度100%的容器 -->
    <div id="map-container">
      <div id="container"></div>
    </div>
  </t-layout-page>
</template>

<script setup lang="ts" name="Circlemarker">
import { onMounted, ref, nextTick } from 'vue'
import { capitals } from "./capitals";
import { MapLoader } from "@/utils/map";
import markerIcon from '@/assets/地图标记.svg'; // 引入本地SVG图标
// 使用ref存储地图实例
const mapRef = ref<any>(null)

onMounted(() => {
  // 使用nextTick确保DOM完全渲染
  nextTick(() => {
    initAMap();
  });
});


const initAMap = () => {
  MapLoader().then((AMap: any) => {
    // 确保容器存在
    const container = document.getElementById('container');
    if (!container) {
      console.error('地图容器未找到');
      return;
    }
    
    // 初始化地图
    mapRef.value = new AMap.Map("container", {
      zoom: 4,
      center: [113.276517, 23.151382],
      viewMode: '2D' // 明确指定视图模式
    });
    
    // 添加标记
    for (let i = 0; i < capitals.length; i += 1) {
      let center = capitals[i].center;

      // 使用 AMap.Marker 代替 CircleMarker
      new AMap.Marker({
        map: mapRef.value,
        position: center,
        icon: new AMap.Icon({
          size: new AMap.Size(40, 40), // 根据需要调整图标大小
          image: markerIcon, // 引用本地SVG图标
          imageSize: new AMap.Size(40, 40), // 图标实际显示的大小
        }),
        title: capitals[i].name, // 显示城市名称
        zIndex: 10,
        bubble: true,
        cursor: "pointer",
        clickable: true
      });
    }
    
    // 可选：调整地图大小以适应容器
    mapRef.value.on('complete', () => {
      mapRef.value.resize();
    });
  }).catch(error => {
    console.error('地图加载失败:', error);
  });
};
// rgb颜色随机
const rgb = () => {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r},${g},${b})`;
};
</script>

<style lang="scss" scoped>
.circle-marker {
  position: relative;
  height: 100%; // 确保布局容器有高度
  
  #map-container {
    width: 100%;
    height: 100%;
    min-height: 500px; // 确保最小高度
    
    #container {
      width: 100%;
      height: 100%;
      
      /* 移除滤镜效果 - 它们会干扰地图渲染 */
      /* filter: invert(100%) hue-rotate(180deg);
      -webkit-filter: invert(100%) hue-rotate(180deg);
      mix-blend-mode: exclusion; */
    }
  }
}
</style>